<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-3.1.1.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/JD2.css" />

		<title></title>
	</head>

	<body>
		<!--顶部-->
		<header>
			<div class="header">
				<ul class="header-left">
					<li>
						<img src="img/header_1.png"/>
						<a href="">首页</a>
					</li>
					<li class="header-l-2">
						<i class="fa fa-map-marker" style="color: #5C5452;"></i>
						<a href="">北京</a>

					</li>

				</ul>
				<ul class="header-right">
					<li th:text="'你好，'+${nickName}"> </li>
					<li>|</li>
					<li class="spacer"></li>
					<li><a href="">我的订单</a></li>
					<li class="spacer"></li>

				</ul>
				<div style="clear: both;"></div>
			</div>


		</header>

		<!--logo图片-->
		<div class="top-1">
			<img src="img/logo1.jpg" class="img1" /><span>结算页</span>
			<!--右侧绿色-->
			<img src="img/08.png" class="img2" />
		</div>

		<!--主体部分-->
		<p class="p1">填写并核对订单信息</p>
		<div class="section">
			<!--收货人信息-->
			<div class="top-2">
				<span>收货人信息</span>
				<span>新增收货地址</span>
			</div>



			<!--地址-->
			<div class="top-3">
				<ul >
				 <li class=".address default selected"  th:each="userAddress:${tradeInfo.userAddresses}" >
					 <input   name="deliveryAddress" type="radio"  th:value="${userAddress.id}"  th:checked="${userAddress.isDefault.equals('0')?false:true}">
					<span  th:text="${userAddress.consignee}"> </span>
					 <span th:text="'送货地址：'+${userAddress.userAddress}+'    手机号：'+${userAddress.phoneNum}">具体地址111 </span>
				 </li>
				</ul>
			</div>
			</form>
			<div class="hh1"/></div>
		<!--********************************************************************************************-->


		<!--支付方式-->
		<h4 class="h4">支付方式</h4>

		<div class="top-6">
			<p>  <span> 在线支付 </span> </p>
		</div>
		<div class="hh1"></div>
		<!--送货清单-->
		<h4 class="h4" style="margin-top: 5px;">送货清单</h4>
		<div class="top_1">

			<div class="to_right">
				<h5>商家：自营</h5>
				<!--图片-->
				<div class="yun1"  th:each="cartItem:${tradeInfo.cartItems}">
					<img  th:src="${cartItem.skuItem.skuDefaultImg}" class="yun"/>
					<div class="mi">
						<div>
							<p style="width: 500px;" th:text="${cartItem.skuItem.skuName}">商品名称111111111111 </p>
							<span style="float: right">
								<span align="center" style="color: red" ></span>
								<span  th:text="'X'+${cartItem.num}" > X 1   </span>
								<span  >有货</span>
								<span  >无货</span>
							</span>
						</div>

					</div>
				</div>

		  </div>
		</div>
		<div class="bto">
			<div class="hh2"></div>
			<h4 class="float">添加订单备注
				<input id="orderCommentPage" type="text" maxlength="145" size="75" style="height: 22px" placeholder="请将购买需求在备注中说明"/>
			</h4>
			<br/>
			<div class="hh3"></div>

		</div>
		<div class="xia">



			<div class="yfze">
				<p class="yfze_a"><span class="z">应付总额：</span>
					<span class="hq" th:text="'￥'+${tradeInfo.totalPrice}"> ￥99999</span></p>


			<button id="submitButton" class="tijiao">提交订单</button>
		</div>
		</div>

		<form action="./submitOrder" method="post" id="orderForm">
			<input id="userAddressIdHiddenInput" type="hidden" name="userAddressId" value=""/>
			<input id="orderCommentHiddenInput" type="hidden" name="orderComment" value=""/>

			<input name="token" type="hidden"  th:value="${token}"  />
		</form>
		<script>
            $(function() {

                $("#submitButton").click(function () {

                    //1、获取被选中的收货地址
					var userAddressId = $("input[name='deliveryAddress']:checked").val();
					$("#userAddressIdHiddenInput").val(userAddressId);

					var orderComment = $("#orderCommentPage").val();
					$("#orderCommentHiddenInput").val(orderComment);

                   $("#orderForm").submit();

                });


                $('.header-right li:nth-of-type(6)').hover(function(){
                    $('.header-r-11').css('display','block')
                },function(){
                    $('.header-r-11').css('display','none')
                })
                $('.header-right li:nth-of-type(12)').hover(function(){
                    $('.header-r-2').css('display','block')
                },function(){
                    $('.header-r-2').css('display','none')
                })
                $('.header-right li:nth-of-type(14)').hover(function(){
                    $('.header-r-3').css('display','block')
                },function(){
                    $('.header-r-3').css('display','none')
                })
                $('.header-l-2').hover(function(){
                    $('.header-l-d').css('display','block')
                },function(){
                    $('.header-l-d').css('display','none')
                })
                $('.header-r-4').hover(function(){
                    $('.h-r-1').css('display','block')
                },function(){
                    $('.h-r-1').css('display','none')
                })
            })



		</script>
	</body>

</html>